<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>订单详情</title>

		<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../css/orstyle.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="../js/vue2.5.js" ></script>
		<script type="text/javascript" src="../js/axios.min.js" ></script>
		<script type="text/javascript" src="../js/jquery-1.11.2.min.js" ></script>
		<script type="text/javascript" src="../js/global.js" ></script>
		<script type="text/javascript" src="../js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script src="../js/param.js"></script>
		<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
		<style>
			.aa{
				
				margin-top:20px;
			}
			.bb p{
				margin-top:20px;
				margin-left:30px;
			}
			.cc{
				margin-top:20px;
				margin-left:30px;
			}		
		</style>

	</head>

	<body>
		
            <div class="nav-table">
					   <div class="long-title"><span class="all-goods">全部分类</span></div>
					   <div class="nav-cont">
							<ul>
							<li class="index"><a href="../index.html">首页</a></li>
							<li class="qc"><a href="text.html">推荐</a></li>
							<li class="qc"><a href="../home/search.html">搜索</a></li>
							<li class="qc"><a href="#">团购</a></li>
							<li class="qc last"><a href="about.html">我们</a></li>
						</ul>
						</div>
			</div>
			<b class="line"></b>
		<div class="center container">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-orderinfo">

						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单详情</strong> / <small>Order&nbsp;details</small></div>
						</div>
						<hr/>
						<!--进度条-->
						<div class="m-progress">
							<div class="m-progress-list">
								<span class="step-1 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">1<em class="bg"></em></i>
                                   <p class="stage-name">拍下商品</p>
                                </span>
								<span class="step-2 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">2<em class="bg"></em></i>
                                   <p class="stage-name">卖家发货</p>
                                </span>
								<span class="step-3 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">3<em class="bg"></em></i>
                                   <p class="stage-name">确认收货</p>
                                </span>
								<span class="step-4 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">4<em class="bg"></em></i>
                                   <p class="stage-name">交易完成</p>
                                </span>
								<span class="u-progress-placeholder"></span>
							</div>
							<div class="u-progress-bar total-steps-2">
								<div class="u-progress-bar-inner"></div>
							</div>
						</div>
						<div class="order-infoaside">
							<div class="order-logistics">
								<a href="javascript:;">
									<div class="icon-log">
										<i><img src="../images/receive.png"></i>
									</div>
									<div class="latest-logistics">
										<p class="text">已签收,签收人是青年城签收，感谢使用天天快递，期待再次为您服务</p>
										<div class="time-list">
											<span class="date">2015-12-19</span><span class="week">周六</span><span class="time">15:35:42</span>
										</div>
										<div class="inquire">
											<span class="package-detail">物流：天天快递</span>
											<span class="package-detail">快递单号: </span>
											<span class="package-number">373269427868</span>
											<a href="javascript:;">查看</a>
										</div>
									</div>
									<span class="am-icon-angle-right icon"></span>
								</a>
								<div class="clear"></div>
							</div>
							<div class="order-addresslist">
								<div class="order-address">
									<div class="icon-add">
									</div>
									<p class="new-tit new-p-re">
										<span class="new-txt">{{adress.uname}}</span>
										<span class="new-txt-rd2">{{adress.phone}}</span>
									</p>
									<div class="new-mu_l2a new-p-re">
										<p class="new-mu_l2cw">
											<span class="title">收货地址：</span>
											<span class="province">{{adress.adress}}</span>
											
									</div>
								</div>
							</div>
						</div>
						<div class="order-infomain">

							<div class="order-top">
								<div class="th th-item">
									<td class="td-inner">商品</td>
								</div>
								<div class="th th-price">
									<td class="td-inner">单价</td>
								</div>
								<div class="th th-number">
									<td class="td-inner">数量</td>
								</div>
								<div class="th th-operation">
									<td class="td-inner">商品操作</td>
								</div>
								<div class="th th-amount">
									<td class="td-inner">合计</td>
								</div>
								<div class="th th-status">
									<td class="td-inner">交易状态</td>
								</div>
								<div class="th th-change">
									<td class="td-inner">交易操作</td>
								</div>
							</div>

							<div class="order-main">

								<div class="order-status3">
									<div class="order-title">
										
									</div>
									<div class="order-content">
										<div class="order-left">
											<ul class="item-list" v-for="(order,index) in orderData">
												<li class="td td-item">
													<div class="item-pic">
														<a href="#" class="J_MakePoint">
															<img :src="baseUrl+'/goods/getgoods?gid='+ order.goods.gid" class="itempic J_ItemImg">
														</a>
													</div>
													<div class="item-info">
														<div class="item-basic-info">
															<a href="#">
																<p>{{order.goods.gname}}</p>
																<p class="info-little">描述：{{order.goods.gdesc}}
																	</p>
															</a>
														</div>
													</div>
												</li>
												<li class="td td-price">
													<div class="item-price">
														{{order.goods.gprice}}
													</div>
												</li>
												<li class="td td-number">
													<div class="item-number">
														<span>×</span>{{order.qty}}
													</div>
												</li>
												<li class="td td-operation">
													<div class="item-operation">
														退款/退货
													</div>
												</li>
												
											</ul>

											

										</div>
										<div class="order-right">
											<li class="td td-amount">
												<div class="item-amount">
													合计：{{getTotalPrice()+10}}.00
													<p>含运费：<span>10.00</span></p>
												</div>
											</li>
											<div class="move-right">
												<li class="td td-status">
													<div class="item-status">
														<p class="Mystatus">{{ostate}}</p>
														
													</div>
												</li>
												<li class="td td-change">
													<div class="am-btn am-btn-danger anniu" @click=ok()>
														{{sure}}</div>
												</li>
											</div>
										</div>
									</div>

								</div>
							</div>
						</div>
					</div>

				</div>
				<!--底部-->
				<div class="footer">
					<div class="footer-hd">
						<p>
							
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
						
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank" title="模板之家"></a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
						</p>
					</div>
				</div>

			</div>
			<aside class="menu">
				<ul>
					<li class="person active">
						<a href="person/index.html"><i class="am-icon-user"></i>个人中心</a>
					</li>
					<!--管理员界面-->
					<li class="person">
						<p><i class="am-icon-qq"></i>管理系统</p>
						<ul>
							<li> <a href="querygoods.html">商品管理</a></li>
							<li> <a href="queryorder.html">订单管理</a></li>		
							
						</ul>
					</li>
					<!--普通界面-->
					<li class="person">
						<p><i class="am-icon-newspaper-o"></i>个人资料</p>
						<ul>
							<li> <a href="information.html">个人信息</a></li>
							<li> <a href="safety.html">安全设置</a></li>
							<li> <a href="address.html">地址管理</a></li>
							
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-balance-scale"></i>我的交易</p>
						<ul>
							<li><a href="order.html">订单管理</a></li>
							<li> <a href="change.html">退款售后</a></li>
							<li> <a href="comment.html">评价商品</a></li>
						</ul>
					</li>
					
					<li class="person">
						<p><i class="am-icon-tags"></i>我的收藏</p>
						<ul>
							<li> <a href="collection.html">收藏</a></li>
																	
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-qrcode"></i>在线客服</p>
						<ul>
							<li> <a href="suggest.html">意见反馈</a></li>		
							<li> <a href="news.html">我的消息</a></li>
						</ul>
					</li>
					
				</ul>

			</aside>
		</div>
		<script>
		var orid = getParam('orid');
		var str =getParam('ostate');
		
		
		function getCharFromUtf8(str) {
		    var cstr = "";
		    var nOffset = 0;
		    if (str == "")
		        return "";
		    str = str.toLowerCase();
		    nOffset = str.indexOf("%e");
		    if (nOffset == -1)
		        return str;
		    while (nOffset != -1) {
		        cstr += str.substr(0, nOffset);
		        str = str.substr(nOffset, str.length - nOffset);
		        if (str == "" || str.length < 9)
		            return cstr;
		        cstr += utf8ToChar(str.substr(0, 9));
		        str = str.substr(9, str.length - 9);
		        nOffset = str.indexOf("%e");
		    }
		    return cstr + str;
		}
		function utf8ToChar(str) {
			var iCode, iCode1, iCode2;
			iCode = parseInt("0x" + str.substr(1, 2));
			iCode1 = parseInt("0x" + str.substr(4, 2));
			iCode2 = parseInt("0x" + str.substr(7, 2));
			return String.fromCharCode(((iCode & 0x0F) << 12) | ((iCode1 & 0x3F) << 6) | (iCode2 & 0x3F));
		}

		var ostate = getCharFromUtf8(str);

		
		
		console.log(ostate);
		var sure="";	
			if(ostate=="待发货"){
				ostate='等待商家发货';
				sure="提醒商家发货";
			}else if(ostate=='待收货'){
				ostate='卖家已发货';
				sure="确认收货";
			}else {
				ostate='已完成订单';
				sure="评论商品";
			}
		
		var vue = new Vue({
			el:'.container',
			data:{
				order:{},
				orderData:[],
				baseUrl:baseUrl,
				ostate:ostate,
				sure:sure,
				adress:{
					uname:localStorage.getItem("uname"),
					phone:localStorage.getItem("phone"),
					adress:localStorage.getItem("adress"),
				}
			},methods:{
				query:function(){
					//查询订单
					axios.get(baseUrl + '/order/getByorid',{
						params:{
							orid:orid
						}
					})
						.then(function(response) {
							
							this.orderData = response.data;
							
						}.bind(this))
						.catch(function(error) {
							layer.msg('请求失败');
						});
					
				},//返回订单总金额
				getTotalPrice: function() {
					var totalPrice = 0;
					//遍历订单数组数据
					this.orderData.forEach(function(order) {

						totalPrice += parseInt(order.qty) * order.goods.gprice;

					});
					
					return totalPrice;
				}
				
				,ok:function(){
					
					if(this.sure=='提醒商家发货'){
						
						
					}else if(this.sure=='确认收货'){
						axios.get(baseUrl + '/order/update2',{
							params:{
								
								ostate:"已完成",
								orid:orid
								
							}
							
						}).then(function(response) {
							
							layer.msg('已确认');
							
						}.bind(this))
						.catch(function(error) {
							layer.msg('请求失败');
						});
						
						
					}else if(this.sure=='评论商品'){
						location.href="commentlist.html?orid="+orid;
						
					}
					
					
					
				}
			},
			mounted:function(){
				this.query();
				
			}	
		});
		
		
		</script>
	</body>

</html>